<template>
	<div class="detail-title"> 
		<p class="title-title">
			{{detailTitle}}
		</p>
		<div class="detail-bottom">
			<div class="db-l">
				<p class="title-info">
					{{detailTag}}
				</p>
				<p class="title-user">
					<span class="iconfont user-ico">
						&#xe628;
					</span>
					{{detailComm}}
				</p>
				<p class="title-user">
					<span class="iconfont pl-ico">
						&#xe61f;
					</span>
					{{detailCtsNum}}
				</p>
			</div>
			<div class="db-r">
				<p class="title-admin">
					管理：admin
				</p>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'detail-title',
		props: {
			detailTitle: String,
			detailTag: String,
			detailComm: Number,
			detailCtsNum: Number
		}
	}
</script>

<style lang="stylus" scoped>
	@import '~stylus/glo.styl'
	.detail-title
		overflow:hidden
		height:218px
		position:relative
		background:#fff
		padding:60px 26px 0 26px
		border-bottom:2px #F0F0F0 solid
		.title-title
			color:#000
			font-size:40px
			font-weight:bold
			line-height:62px
			display: -webkit-box
			-webkit-line-clamp: 2
			overflow:hidden
			text-overflow:ellipsis
			-webkit-box-orient: vertical
		.detail-bottom
			width:100%
			height:60px
			position:absolute
			bottom:0
			left:0
			display:flex
			flex-direction:row
			color:#aaa
			font-size:24px
			.db-l
				width:50%
				height:88px
				.title-info			
					display:inline-block
					margin:0 14px 0 30px		
					background:#fff
					padding:6px 10px
					border:2px $public_thems_color solid
					color:$public_thems_color
					border-radius:4px
				.title-user
					display:inline-block
					.user-ico
						font-size:28px
					.pl-ico
						font-size:22px
						margin-left:12px
			.db-r
				width:50%
				height:88px
				.title-admin
					float:right
					margin:6px 30px 0 0	
					font-size:23px
</style>
